<template>
  <div class="song-list">
    <a-table :columns="columns" :data-source="data">
      <a slot="name" slot-scope="text">{{ text }}</a>
      <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
      <span slot="tags" slot-scope="tags">
        <a-tag
          v-for="tag in tags"
          :key="tag"
          :color="tag === 'SQ' ? 'volcano' : 'green'"
        >
          {{ tag.toUpperCase() }}
        </a-tag>
        <span slot="vedioes">
          <a><a-icon class="vedio-icon" type="play-square"/></a>
        </span>
      </span>
      <span slot="artist" slot-scope="text, record">
        <a>{{ record.artist }}</a>
      </span>
    </a-table>
  </div>
</template>
<script>
const columns = [
  {
    title: '歌曲',
    dataIndex: 'number',
    key: 'number'
  },
  {
    dataIndex: 'name',
    key: 'name'
  },
  {
    key: 'tags',
    dataIndex: 'tags',
    scopedSlots: { customRender: 'tags' }
  },
  {
    key: 'vedioes',
    dataIndex: 'vedioes',
    scopedSlots: { customRender: 'vedioes' }
  },
  {
    title: '歌手',
    key: 'artist',
    dataIndex: 'artist',
    scopedSlots: { customRender: 'artist' }
  },
  {
    title: '时长',
    dataIndex: 'time',
    key: 'time'
  }
]

const data = [
  {
    key: '1',
    number: '01',
    name: 'When The Wind Blows',
    tags: ['VIP', 'SQ'],
    vedioes: true,
    artist: '允儿',
    time: '03:46'
  },
  {
    key: '2',
    number: '02',
    name: 'When The Wind Blows',
    tags: ['VIP', 'SQ'],
    artist: '允儿',
    time: '03:46'
  },
  {
    key: '3',
    number: '03',
    name: 'When The Wind Blows',
    tags: ['VIP', 'SQ'],
    artist: '允儿',
    time: '03:46'
  }
]

export default {
  data() {
    return {
      data,
      columns
    }
  }
}
</script>

<style scoped>
.song-list {
  margin-top: 30px;
}
.vedio-icon {
  font-size: 23px;
}
</style>
